/*
 * commision records
**/
<template>
<div class="weui-tab">
	<div class="weui-tab__panel">
	  <div class="w-head">
	  	<div class="w-info">
	  		<i class="i-rec"></i><span>佣金订单记录</span><span class="tip">（记录每半小时更新一次）</span>
	  		<div class="coin-box">
	  			<i class="i-coin"></i> <span>{{score}}</span>
	  		</div>
	  	</div>
	  	<div class="w-filter-box clear">
		  	<ul class="w-filter">
		  		<li :class="{'active': status === -1}" @click="tab(-1)">全部</li>
		  		<li :class="{'active': status === 3}" @click="tab(3)">已结算</li>
		  		<li :class="{'active': status === 1}" @click="tab(1)">未确认</li>
		  		<li :class="{'active': status === 2}" @click="tab(2)">待结算</li>
		  		<li :class="{'active': status === 0}" @click="tab(0)">无效</li>
		  	</ul>
	  	</div>
	  </div>
	  <div class="game-box" v-load-more="loaderMore">
	    <div class="weui-cell" v-for="item in dataList" @click="infopage(item)">
	      <!--<div class="weui-cell__hd def-icon">
	        <img :src="item.imgThum" alt="" class="logo"/>
	      </div>-->
	      <div class="weui-cell__bd">
	        <p class="cell__bd-tit ellipsis">{{item.skuName}}</p>
	        <p class="cell__bd-dec"><!--<span class="type">返佣金</span>--><span>{{item.orderTime}}</span></p>
	      </div>
	      <div class="weui-cell__ft reset-ft">
	        <span class="w-score" :class="{ler: item.status === 0}">+{{item.commision}}</span>
	        <span class="w-status war" v-if="item.status === -1">已支出</span>
	        <span class="w-status" v-if="item.status === 0">无效</span>
	        <span class="w-status war" v-if="item.status === 1">未确认</span>
	        <span class="w-status war" v-if="item.status === 2">待结算</span>
	        <span class="w-status suc" v-if="item.status === 3">已结算</span>
	      </div>
	    </div>
	      <!--more-->
	      <div class="weui-loadmore" v-if="showLoading">
		    <i class="weui-loading"></i>
		    <span class="weui-loadmore__tips">正在加载</span>
		  </div>
		  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
		      <span class="weui-loadmore__tips">没有更多</span>
		  </div>
	  </div>
	</div>
	
	<div class="quick-footernav"><router-link class="ui-btn" to="/icenter">&nbsp;&nbsp;返回&nbsp;&nbsp;</router-link></div>
	
	<div v-if="inGetData">
	    <div class="weui-mask_transparent"></div>
	    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
	        <i class="weui-loading weui-icon_toast"></i>
	        <p class="weui-toast__content">数据加载中</p>
	    </div>
	</div>
</div>
</template>
<script>
import {getFanliOrderList} from 'src/service/getData'
import {loadMore} from 'src/config/mixin'
import {mapMutations} from 'vuex'
export default {
  data () {
    return {
      inGetData: false, // loading
      touchend: false, // 没有更多数据
      showLoading: true, // 显示加载动画
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      currentPage: 0,
      pageSize: 6,
      status: -1, // 数据列表类型
      dataList: [], // 数据
      score: 0 // 积分
    }
  },
  mixins: [loadMore],
  components: {
  },
  mounted () {
    this.score = this.$route.query.score
    this.initData()
  },
  methods: {
    initData () {
      this.inGetData = true
      this.getFanliOrderList()
    },
    tab (status) {
      this.inGetData = true
      this.touchend = false
      this.status = status
      this.getFanliOrderList()
    },
    async getFanliOrderList (more) {
      // 最后一页不再加载
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      // load
      this.preventRepeatReuqest = true
      this.showLoading = true
      // fetch
      let tmpData = await getFanliOrderList(this.currentPage, this.status, this.pageSize)
      if (tmpData.code !== 0) return
      let dataList = tmpData.data.rows
      if (more) {
        this.dataList = [...this.dataList, ...dataList]
      } else {
        this.dataList = dataList
      }
      this.inGetData = false
      this.showLoading = false
      // 最后一页
      if (dataList.length < this.pageSize) {
        this.touchend = true
      }
      this.preventRepeatReuqest = false
    },
    loaderMore () {
      if (!this.touchend) {
        this.currentPage++
        this.getFanliOrderList(true)
      }
    },
    ...mapMutations([
      'RECORD_GOODINFO' // 用户代言人状态
    ]),
    infopage (elem) {
      this.RECORD_GOODINFO(elem)
      this.$router.push('/recordetail')
    }
  }
}
</script>
<style scoped>
	.weui-tab{position: absolute;width: 100%;}
	.i-rec{background-image:url(../../assets/imgs/2_03.png);background-size: 100%;display: inline-block; width: 0.2rem; height: 0.2rem; vertical-align: middle; margin-right: 0.1rem;}
	.i-coin{background-image:url(../../assets/imgs/credits.png);background-size: 100%;display: inline-block; width: 0.17rem; height: 0.17rem; vertical-align: middle;}
	.w-head{background: #fff;font-size: 0.12rem;padding: 0;line-height:0.34rem;color: #333;}
	.w-head span{vertical-align: middle; font-size: 0.14rem; color: #333;}
	.w-info{position: relative; line-height: 0.37rem; padding: 0 0.15rem;}
	.w-info .tip{color:#999;font-size: 0.08rem;padding-left: 0.1rem;}
	.coin-box{position: absolute; right: 0.15rem; top: 0rem;}
	.coin-box span{font-size: 0.15rem; color: #ffa200;vertical-align: middle;}
	.w-filter-box{border-top:1px solid #f4f5f8;overflow-x: auto; line-height: 0.33rem;}
	.w-filter{width: 9999px;}
	.w-filter li{float: left; padding: 0 0.35rem;}
	.w-filter li.active{color: #ffa200;}
	.game-box{margin-top: 0.05rem;}
	.game-box .cell__bd-tit{font-size: 0.12rem; color: #666;width: 2.8rem !important;}
	.game-box .cell__bd-dec{color: #a9a9a9; font-size: 0.1rem;}
	.game-box .cell__bd-dec .type{font-size: 0.12rem; color: #333; margin-right: 0.12rem;}
	.game-box .weui-cell{background:#fff;padding:0.1rem;}
	.game-box .def-icon{width: 0.44rem; height: 0.44rem; overflow: hidden; border-radius: 50%; border: 1px solid #f8f8f8; margin-right:0.06rem}
	.game-box .logo{width: 100%;}
	.game-box .w-score{font-size: 0.12rem; display: block;color: #333;text-align: center;}
	.game-box .w-score.ler{color:#999;}
	.game-box .w-status{font-size: 0.13rem; display: block;color:#666;}
	.game-box .w-status.war{color:#f84d25;}
	.game-box .w-status.suc{color:#73db3a;}
	.btn-box{padding: 0; line-height: 0.4rem; align-items: center; -webkit-box-align: center; padding-top: 0.1rem;}
	.btn-box .back{background: #ffa200; color: #fff; padding: 0.1rem 0.43rem; border-radius: 22px;}
	.weui-cell:before{left:15px !important;right:15px !important;}
	.weui-loadmore__tips{background:#efeff4 !important;}
</style>
